<template>
  <div>
    <div class="card" style="margin-bottom: 5px">
      <el-input clearable @clear="load" style="width: 260px;margin-right: 5px"  v-model="data.userName" placeholder="请输入借阅人查询" :prefix-icon="Search"></el-input>
      <el-button type="primary" @click="load">查询</el-button>
      <el-button @click="reset">重置</el-button>
    </div>


    <div class="card" style="margin-bottom: 5px">
      <el-table :data="data.tableData" style="width: 100%" :header-cell-style="{color:'#333',backgroundColor:'#eaf4ff'}">
        <el-table-column prop="userName" label="用户" />
        <el-table-column prop="activityName" label="活动" />
        <el-table-column prop="applyTime" label="时间" />
      </el-table>
    </div>

    <div class="card" style="margin-bottom: 5px">
      <el-pagination
          v-model:current-page="data.pageNum"
          v-model:page-size="data.pageSize"
          :page-sizes="[5,10,20]"
          :total="data.total"
          layout="total,sizes, prev, pager, next,jumper"
          @current-change="load"
          @size-change="load"
      />
    </div>


  </div>
</template>

<script setup>
import {Search} from "@element-plus/icons-vue";
import {reactive,ref} from "vue";
import request from "@/utils/request.js";
import {ElMessage, ElMessageBox} from "element-plus";

const formRef=ref()

const data=reactive({
  user:JSON.parse(localStorage.getItem('code_user')||"{}"),
  userName:null,
  pageNum:1,
  pageSize:5,
  total:0,
  tableData:[],
  form:{},
  formVisible:false,
})

const load =()=>{
  request.get('/activityRecord/selectPage',{
    params:{
      pageNum:data.pageNum,
      pageSize:data.pageSize,
      userName:data.userName
    }
  }).then(res=>{
    if(res.code==='200'){
      data.tableData=res.data?.list
      data.total=res.data?.total
    }else {
      ElMessage.error(res.msg)
    }
  })
}
load()


const reset=()=>{
  data.userName=null
  load()
}
</script>